<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>页面管理</title>
<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" ></script>
<!-- zTree -->
<link rel="stylesheet" type="text/css" th:href="@{/plug/zTree/css/zTreeStyle/zTreeStyle.css}"/>
<script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.core.js}" ></script>
<script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.excheck.js}" ></script>
<script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.exedit.js}" ></script>
<script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.all.js}" ></script>
<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" media="all"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>

<link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
<script type="text/javascript" th:src="@{/js/layer/layer.js}" ></script>

<style type="text/css">
.op_div{display:inline;}
.ztree li span.button.add {margin-left:2px; margin-right: 2px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}

.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
.ztree li ul.level0 {padding:0; background:none;}

.input_0{width: 240px;}
</style>

<script type="text/javascript"  th:inline="javascript">
var zTree = null;
var checkNode = null;

$(function(){
	
	var pageList=[[${pageList}]];
	//console.log(pageList);
	//alert(pageList.length);
	pageList.unshift({pageId:0, name:"所有菜单", parentId:0});
	//当levelType为0时才是一级菜单
	//zTree配置
	var setting = {
		data: {
			simpleData: {
				enable: true,
                idKey: "pageId",//节点id名
                pIdKey: "parentId",//父节点id名
                rootPId: 0//默认根节点为0
			},
			key: {
				url: "aa"
			}
		},
		view: {
			selectedMulti: true,
			showTitle: true,
			dblClickExpand: true,
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom
		}
	};
	if($("#pageList") && setting!=null && pageList!=null){		
		zTree = $.fn.zTree.init($("#pageList"), setting, pageList);
		
		//全部展开
		zTree.expandAll(true);
	}
});

//鼠标移上图标
function addHoverDom(treeId, treeNode) {
	var nodeId = treeNode.pageId;
	
	var sObj = $("#" + treeNode.tId + "_span");
	
	if($("#op_"+nodeId).length > 0){
		return;
	}
	
	var str = "<div id='op_"+nodeId+"' class='op_div'>";
	
	if(treeNode.levelType == 0 || nodeId == 0){
		//只有跟节点，一级菜单可以增加子菜单
		str += "<span class='button add' title='增加子菜单' onclick='addNode("+nodeId+")' ></span>";
	}
	//删除，没有子节点，可以删除
	var nodes = zTree.getNodesByParam("parentId", nodeId, treeNode);
	if(nodes == null || nodes.length == 0){
		str += "<span class='button remove' title='删除菜单' onclick=\"delNode("+nodeId+", '"+treeNode.tId+"')\" ></span>";
	}
	//升级，除了跟节点，都可以升级
	if(nodeId != 0){
		str += "<span class='button edit' title='修改菜单' onclick=\"aditNode("+nodeId+", '"+treeNode.tId+"')\" ></span>";
	}
	
	str += "</div>";

	sObj.after(str);
	
	checkNode = treeNode;
};

//移除图标
function removeHoverDom(treeId, treeNode) {
	$("#op_"+treeNode.pageId).remove();
};

//增加子菜单
function addNode(parentId){
	//alert(parentId+" 下增加子菜单");
	
	$(".node_table").find("span").text("");
	$("#menu_name").val("");
	$("#menu_url").val("").parent().parent().show();
	
	$("#menu_parentId").val(parentId);
	
	if(!parentId){
		//根菜单,不需要URL
		$("#menu_url").parent().parent().hide();
	}
	
	layer.open({
	    type: 1,
		title: "增加菜单",
	    area: ['440px', '178px'], //宽高
	    content: $("#addNode"),
	    btn: ['保存','关闭'], //按钮
	    yes: function(index, layero){
	    	save(parentId);
	    }
	});
}

//修改
function aditNode(id, tId){
	//一级菜单，只能改名称
	var node = zTree.getNodeByTId(tId);
	
	if(node.levelType == 0){
		$("#urlTr").hide();
		$("#menu_url").val("");
	}else{
		$("#urlTr").show();
		$("#menu_url").val(node.url);
	}
	
	$("#menu_name").val(node.name);
	$("#menu_parentId").val(node.parentId);
	
	layer.open({
	    type: 1,
		title: "修改菜单",
	    area: ['440px', '178px'], //宽高
	    content: $("#addNode"),
	    btn: ['保存','关闭'], //按钮
	    yes: function(index, layero){
	    	edit(tId);
	    }
	});
}

function edit(tId){
	//一级菜单，只能改名称
	var node = zTree.getNodeByTId(tId);
	
	$(".node_table span").text("");
	var name = $.trim($("#menu_name").val());
	
	var flag = true;
	if(name == ""){
		$("#menu_name").parent().next().find("span").text("名称不可为空");
		flag = false;
	}else{
		if(name.length > 10){
			$("#menu_name").parent().next().find("span").text("名称最多10个字符");
			flag = false;
		}
	}
	
	if(node.levelType == 0){
		//只验证名称
	}else{
		var url = $.trim($("#menu_url").val());
		
		if(url == ""){
			$("#menu_url").parent().next().find("span").text("URL不可为空");
			flag = false;
		}
	}
	
	if(flag){
		layer.msg('保存中...', {icon: 16, time: 0, shade: [0.3, '#000']});
		
		node.name = name;
		
		if(node.levelType != 0){
			node.url = $.trim($("#menu_url").val());
		}
		
		$.ajax({
    		type:"POST",
    		async: false,  //默认true,异步
    		data: node,
    		dataType:"json",  
    		url: "/admin/updatePageById",
    		success:function(data){
				layer.closeAll();
		    	if(data.result == "success"){
    				layer.alert('更新成功！', {icon: 1}, function(indexOk){
    					layer.close(indexOk);
    				});
    			}else{
    				layer.alert('更新失败！', {icon: 0}, function(indexOk){
    					layer.close(indexOk);
    				});
    			}
		    	zTree.updateNode(node, false);
    	    }
    	});
		
	}
}

function save(parentId){
	
	$(".node_table span").text("");
	var name = $.trim($("#menu_name").val());
	var url = $.trim($("#menu_url").val());
	
	var flag = true;
	if(name == ""){
		$("#menu_name").parent().next().find("span").text("名称不可为空");
		flag = false;
	}else{
		if(name.length > 10){
			$("#menu_name").parent().next().find("span").text("名称最多10个字符");
			flag = false;
		}
	}
	if(parentId && url == ""){
		$("#menu_url").parent().next().find("span").text("URL不可为空");
		flag = false;
	}
	
	if(flag){
		//验证通过
		//alert("验证通过");
		layer.msg('保存中...', {icon: 16, time: 0, shade: [0.3, '#000']});
		
		var param = {};
		param.name = name;
		param.url = url;
		param.deleteFlag = 0;
		param.parentId = $("#menu_parentId").val();
		
		var nodes = zTree.getNodesByParam("parentId", param.parentId, null);
		//新增节点在最后，要确定他的levelType,levelIndex
		param.levelIndex = 0;
		for(var i=0; i<nodes.length; i++){
			if(nodes[i].levelIndex > param.levelIndex){
				param.levelIndex = nodes[i].levelIndex;
			}
		}
		param.levelIndex = param.levelIndex + 1;
		if(checkNode.levelType == null){
			param.levelType = 0
		}else{
			param.levelType = checkNode.levelType + 1;
		}
		
		//alert(JSON.stringify(param));
		
		$.ajax({
    		type:"POST",
    		async: false,  //默认true,异步
    		data: param,
    		dataType:"json",
    		url: "/admin/addPage",
    		success:function(data){
		    	//增加成功
				layer.closeAll();
    			if(null!=data.pageId){
    				layer.alert('添加成功！', {icon: 1}, function(indexOk){
    					layer.close(indexOk);
    				});
    			}else{
    				layer.alert('添加失败！', {icon: 0}, function(indexOk){
    					layer.close(indexOk);
    				});
    			}
		    	zTree.addNodes(checkNode, data);
    	    }
    	});
		
	}
}

function delNode(id, tId){
	layer.confirm('确认删除吗？', {icon: 3, title:'提示'}, function(index){
		if(id){			
			layer.msg('保存中...', {icon: 16, time: 0, shade: [0.3, '#000']});
			$.ajax({
	    		type:"POST",
	    		async:false,  //默认true,异步
	    		data: {id:id+""},
	    		dataType:"json",  
	    		url: "/admin/delPageById",
	    		success:function(data){
	    			layer.closeAll();
	    			if(data.result == "success"){
	    				layer.alert('删除成功！', {icon: 1}, function(indexOk){
	    					layer.close(indexOk);
	    				});
	    			}else{
	    				layer.alert('删除失败！', {icon: 0}, function(indexOk){
	    					layer.close(indexOk);
	    				});
	    			}
	    			zTree.removeNode(zTree.getNodeByTId(tId));
	    		}
	    	});
		}
		
	});
}
</script>
</head>
<body>
<div style="margin-left:15px; height: 600px; width: 96%">
	<div class="first_div" style="border:none;">
		<ul id="pageList" class="ztree"></ul>
	</div>

	<div id="addNode" style="display:none;margin:10px;">
		<table class="node_table" cellpadding="0" cellspacing="0" style="">
			<tr>
				<td align="right">名称：</td>
				<td align="left">
					<input type="text" id="menu_name" class="input_0" />
				</td>
				<td>
					<span style="color:red;margin-left:10px;"></span>
				</td>
			</tr>
			<tr>
				<td colspan="3" style="height:5px;"></td>
			</tr>
			<tr id="urlTr">
				<td align="right">URL：</td>
				<td align="left">
					<input type="text" id="menu_url" class="input_0" />
				</td>
				<td>
					<span style="color:red;margin-left:10px;" ></span>
				</td>
			</tr>
		</table>
		<input type="hidden" id="menu_parentId" />
	</div>
	</div>
</body>
</html>
